<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>一个重要的内置关系</title>
</head>
<body>
    <!-- 
        1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
        2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
     -->
    <div id="root">
       <school></school>
    </div>
    <script type="text/javascript">

        Vue.prototype.x = 99
        //school组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="showX">点我输出x</button>
                </div>
            `,
            data(){
                return {
                    name: '北极星',
                    address: '青岛'
                }
            },
            methods:{
                showX(){
                    console.log(this)
                    console.log(this.x)
                }
            }
        })
       const vm = new Vue({
            el: '#root',
            data(){
                return {
                    msg:'你好'
                }
            },
            components:{
                school
            }
       })
       console.log(school.prototype.__proto__ === Vue.prototype)
       

        // //创建一个构造函数
        // function Demo(){
        //     this.a = 1
        //     this.b = 2
        // }
        // //创建一个Demo实例对象
        // const d = new Demo()
        // console.log(Demo.prototype)//显示原型属性
        // console.log(d.__proto__)//隐式原型属性

        // //程序员通过显原型属性操作原型对象，追加一个x属性，值为99
        // Demo.prototype.x = 99
        // console.log(d.x)

    </script>
</body>
</html>